<!-- loading -->
<!-- <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px'}"></ngx-loading> -->
<div class="content">
  <!-- 错误信息提示框 -->
  <div class="tip-postion" *ngIf="isShowErrorTip">
      <div class="alert alert-danger">
        <span class="glyphicon glyphicon-info-sign"></span>
        <div class="w10"></div>{{errorMessage}}
    </div>
  </div>
  <!-- 图片预览 -->
  <div id="myModal" class="modal">
    <span class="close" (click)="closePreview()">×</span>
    <img class="modal-content" [src]="previewUrl" alt="loading">
  </div>

  <!-- 成功信息提示框 -->
  <div class="tip-postion" *ngIf="isShowSuccessTip">
      <div class="alert alert-success">
        <span class="glyphicon glyphicon-ok"></span>
        <div class="w10"></div>{{successMessage}}
    </div>
  </div>

  <!-- 遮罩层 -->
  <p-blockUI [blocked]="isShowBlock"></p-blockUI>

  <!-- 添加分类 -->
  <div class="panel panel-default add-module" *ngIf="isShowAddModule">
    <div class="panel-heading">
      <span>添加分类模块</span>
    </div>
    <form (ngSubmit)="addCategory()" #carouseForm="ngForm">
      <div class="panel-body">
        <div class="form-group">
          <label>分类标题:</label>
          <input type="text" class="form-control" name="categoryName" maxlength="20" [(ngModel)]="categoryName" 
          #localCategoryName="ngModel" required placeholder="限20个字" [class.red-border]="localCategoryName.touched && localCategoryName.invalid"/>
        </div>
        <div class="form-group">
          <label>分类图片:</label><br/>
          <a class="btn btn-primary image-upload">
            <span [class]="uploadFont"></span><span class="upload-span">{{imageFileName}}</span>
            <input type="file" accept="image/*" class="image-input" (change)="onImageUpload($event)" name="imageFile"/>
          </a>
        </div>
        <div class="form-group">
          <label>分类描述:</label>
          <textarea class="form-control" name="categoryDescription" maxlength="50" [(ngModel)]="categoryDescription"
          #localCategoryDescription="ngModel" placeholder="限50个字" [class.red-border]="localCategoryDescription.touched && localCategoryDescription.invalid">
          </textarea>
        </div>
        <div class="form-group">
            <p-checkbox [(ngModel)]="needShowInHome" binary="true" name="needShowInHome" id="needShowInHome"></p-checkbox>
            <label for="needShowInHome" (click)="needShowInHome=!needShowInHome">是否展示在主页</label>
        </div>
      </div>
      <div class="panel-footer clearfix">
        <button class="btn btn-default fr" type="button" (click)="cancelAddModule()">取消</button>
        <button class="btn btn-info fr mr10" type="submit" [disabled]="!carouseForm.form.valid">保存</button>
      </div>
    </form>
  </div>

  <!-- 修改轮播图 -->
  <div class="panel panel-default modify-module" *ngIf="isShowModifyModule">
    <div class="panel-heading">
      <span>修改分类模块</span>
    </div>
    <form (ngSubmit)="modifyCategory()" #modifyCarouseForm="ngForm">
      <div class="panel-body">
        <div class="form-group">
          <label>分类标题:</label>
          <input type="text" class="form-control" name="categoryName" maxlength="20" [(ngModel)]="categoryName" 
          #localCategoryName="ngModel" required placeholder="限20个字" [class.red-border]="localCategoryName.touched && localCategoryName.invalid"/>
        </div>
        <div class="form-group">
          <label>分类图片:</label><br/>
          <a class="btn btn-primary image-upload">
            <span [class]="uploadFont"></span><span class="upload-span">{{imageFileName}}</span>
            <input type="file" accept="image/*" class="image-input" (change)="onImageUpload($event)" name="imageFile"/>
          </a>
        </div>
        <div class="form-group">
          <label>分类描述:</label>
          <textarea class="form-control" name="categoryDescription" maxlength="50" [(ngModel)]="categoryDescription"
          #localCategoryDescription="ngModel" placeholder="限50个字" [class.red-border]="localCategoryDescription.touched && localCategoryDescription.invalid">
          </textarea>
        </div>
        <div class="form-group">
          <p-checkbox [(ngModel)]="needShowInHome" binary="true" name="needShowInHome" id="needShowInHome"></p-checkbox>
          <label for="needShowInHome" (click)="needShowInHome=!needShowInHome">是否展示在主页</label>
        </div>
      </div>
      <div class="panel-footer clearfix">
        <button class="btn btn-default fr" type="button" (click)="cancelModifyModule()">取消</button>
        <button class="btn btn-info fr mr10" type="submit" [disabled]="!modifyCarouseForm.form.valid">保存</button>
      </div>
    </form>
  </div>

  <!-- 删除模块 -->
  <div class="panel panel-danger delete-module" *ngIf="isShowDeleteModule">
    <div class="panel-heading">确定要删除该分类信息吗？</div>
    <div class="panel-body">
      <button class="btn btn-info" (click)="confirmDeleteCategory()">确定</button>
      <div class="w10"></div>
      <button class="btn btn-default" (click)="cancelDeleteModule()">取消</button>
    </div>
  </div>

  <!-- 轮播图管理标题 -->
  <div class="head">
    <span class="head-title">分类管理</span>
    <button class="btn btn-info fr" (click)="isShowAddModule=true;isShowBlock=true"><span class="fa fa-plus"></span>&nbsp;添加</button>
  </div>
  <hr />
  <!-- 轮播图表格 -->
  <table class="table table-bordered table-hover table-striped">
    <thead>
      <tr>
        <th width="5%">序号</th>
        <th width="15%">分类名称</th>
        <th width="25%">分类描述</th>
        <th width="10%">分类图片</th>
        <th width="10%">是否展示在主页</th>
        <th width="12%">创建时间</th>
        <th width="13%">更新时间</th>
        <th width="10%">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of categoryList;let i = index">
        <td>{{i + 1}}</td>
        <td>{{item?.categoryName}}</td>
        <td>{{item?.categoryDescription}}</td>
        <td><img *ngIf="item?.imageUrl !== null" (click)="previewImage(item?.imageUrl)" class="home-carousel-figure-img" [src]="sanitizer.bypassSecurityTrustUrl(item?.imageUrl)" alt="loading"/></td>
        <td>{{item?.needShowInHome ? '是' : '否'}}</td>
        <td>{{item?.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
        <td>{{item?.updateTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
        <td>
          <button class="btn btn-warning" (click)="showModifyModule(item)">
            <span class="glyphicon glyphicon-edit"></span>
          </button>
          <button class="btn btn-danger" (click)="deleteCategory(item.categoryId)">
            <span class="glyphicon glyphicon-trash"></span>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <nav aria-label="Page navigation">
    <ul class="pager">
      <li class="previous cp" [class.disabled]="pageNum === 1"><a (click)="prePage()"><span aria-hidden="true">&larr;</span>上一页 </a></li>
      <li><span>当前第{{pageNum}}页&nbsp;共{{pages}}页</span></li>
      <li class="next cp" [class.disabled]="pageNum === pages"><a (click)="nextPage()">下一页 <span aria-hidden="true">&rarr;</span></a></li>
    </ul>
  </nav>
</div>
